<script setup lang="ts">
import { computed } from 'vue';
import { RouteRecordRaw } from 'vue-router';

defineOptions({
  name: 'UiMenuItem'
})

const props = defineProps<{
  data: RouteRecordRaw,
  parentPath?: string
}>()

const isVisible = (item: typeof props.data) => {
  return !(/:\S+/.test(item.path) || item.meta?.notMenu)
}

const visible = computed(() => isVisible(props.data))

const hasChildren = computed(() => {
  return (props.data.children ?? []).filter(isVisible).length > 0
})

const getFullPath = (path: string) => {
  return path.startsWith('/')
    ? path
    : [props.parentPath, path].filter(_ => _).join('/')
}
</script>

<template>
  <ElSubMenu v-if="hasChildren" :index="getFullPath(data.path)">
    <template #title>
      <ElIcon v-if="data.meta?.icon">
        <component :is="data.meta.icon" />
      </ElIcon>
      <span>{{ data.meta?.title }}</span>
    </template>
    <UiMenuItem v-for="item in data.children" :data="item" :parent-path="getFullPath(data.path)" />
  </ElSubMenu>
  <template v-else>
    <ElMenuItem v-if="visible" :index="getFullPath(data.path)">
      <template #title>
        <span>{{ data.meta?.title }}</span>
      </template>
    </ElMenuItem>
  </template>
</template>
